import React from "react";
import { areaList } from '@vant/area-data';

const Profile = () => {

    // 初始化一个路由方法
    let navigate = React.Router.useNavigate();

    const [form] = React.Vant.Form.useForm();

    const [business,setBusiness] = React.useState(React.Cookies.load('business') ? React.Cookies.load('business') : {});
    const [GenderShow,setGenderShow] = React.useState(false);
    const [GenderList,setGenderList] = React.useState([
        {text:'保密',value:0}, 
        {text:'男',value:1},
        {text:'女',value:2} 
    ]);
    const [RegionShow,setRegionShow] = React.useState(false);
    const [code,setCode] = React.useState([
        business.province,
        business.city,
        business.district
    ]);
    const [avatar,setAvatar] = React.useState([]);


    const onSubmit = async (values) => {
        // console.log(values);
        // setBusiness(business);
        let data = {
            busid:business.id,
            code:code,
            // avatar:values.avatar[0]?.file,
            nickname:values.nickname,
            gender:business.gender,
            // password:values.password,
            email:values.email.trim()
            // avatar
        }
        if(values.password)
        {
            data.password = values.password.trim();
        }
    
        if(values.avatar[0]?.file)
        {
            data.avatar = values.avatar[0]?.file;
        }

        // console.log(data);

        let result = await React.Api.profile(data);
        // console.log(result.value);
        // console.log(result.value);
        if(result.code === 1)
        {
            // console.log(11111);
            React.Vant.Notify.show({
                type:'success',
                message:result.msg,
                duration:1500,
                onClose:() => {

                    // 返回登录信息存到cookie
                    React.Cookies.save('business',result.data,{path:'/'});

                    navigate('/business/base/index');
                }
            });

            return;
        }else{
            React.Vant.Notify.show({
                type:'warning',
                message:result.msg,
                duration:1500,
            });

            return;
        }

    }

    

    const GenderConfirm = (_,value) => {

        if(!value)
        {
            return;
        }

        business.gender_text = value.text;
        business.gender = value.value;

        setBusiness(business);
        setGenderShow(false);
    }

    const RegionConfirm = (_,values) => {

        let [province,city,district] = values;

        if(!province || !city || !district)
        {
            return;
        }

        let regionText = province.text + '-' + city.text + '-' + district.text;
        let RegionCode = [province.value,city.value,district.value];

        business.region_text = regionText;

        setCode(RegionCode);
        setBusiness(business);
        setRegionShow(false);
    }

    const FormFooter = () => {
        return (
            <div style={{ margin: '16px 16px 0' }}>
                <React.Vant.Button round nativeType='submit' type='primary' block>
                    提交
                </React.Vant.Button>
            </div>
        )
    }

    return (
        <>
            <React.Vant.Sticky
                zIndex={10}
            >
                <React.Vant.NavBar
                    title="基本资料"
                    leftText="返回"
                    onClickLeft={() => navigate(-1)}
                />
            </React.Vant.Sticky>

            <div className="my_kuang">
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        <div className="toux_hou">
                            <img id="Dfgrg" style={{height:"1.1rem"}} src={business.avatar_cdn} alt="" />
                            
                        </div>
                    </div>
                </div>

                <div className="profile" style={{paddingBottom:'20px'}}>
                    <React.Vant.Form
                        form={form}
                        onFinish={onSubmit}
                        footer={<FormFooter />}
                        labelAlign='right'
                        colon
                    >
                        {/* 手机号 */}
                        <React.Vant.Form.Item
                            name='mobile'
                            label='手机号'
                            labelWidth='55'
                            initialValue={business.mobile}
                        >
                            <React.Vant.Input placeholder='请输入手机号' readOnly />
                        </React.Vant.Form.Item>

                        {/* 昵称 */}
                        <React.Vant.Form.Item
                            rules={[{ required: true, message: '请填写昵称' }]}
                            name='nickname'
                            label='昵称'
                            labelWidth='55'
                            initialValue={business.nickname || ''}
                        >
                            <React.Vant.Input placeholder='请输入昵称' />
                        </React.Vant.Form.Item>

                        <React.Vant.Form.Item
                            rules={[{ required: true, message: '请填写邮箱' }]}
                            name='email'
                            label='邮箱'
                            labelWidth='55'
                            initialValue={business.email || ''}
                        >
                            <React.Vant.Input type='email' placeholder='请输入邮箱' />
                        </React.Vant.Form.Item>

                        <React.Vant.Form.Item
                            name='password'
                            label='密码'
                            labelWidth='55'
                        >
                            <React.Vant.Input type='password' placeholder='留空不修改密码' />
                        </React.Vant.Form.Item>

                        {/* 性别 */}
                        <React.Vant.Form.Item
                            label="性别"
                            onClick={() => {setGenderShow(true)}}
                            isLink
                            labelWidth='55'

                        >
                            <React.Vant.Input placeholder="请选择性别" readOnly value={business.gender_text} />
                        </React.Vant.Form.Item>

                        <React.Vant.Popup position="bottom" round visible={GenderShow} onClose={() => {setGenderShow(false)}}>
                            <React.Vant.Picker 
                                title="性别" 
                                columns={GenderList} 
                                defaultValue={business.gender * 1}
                                onConfirm={GenderConfirm} 
                                onCancel={() => {setGenderShow(false)}}
                            />
                        </React.Vant.Popup>

                        {/* 地区 */}
                        <React.Vant.Form.Item
                            label="地区"
                            labelWidth='55'
                            onClick={() => {setRegionShow(true)}}
                            isLink
                        >
                            <React.Vant.Input placeholder="请选择地区" readOnly value={business.region_text} />
                        </React.Vant.Form.Item>

                        <React.Vant.Popup position="bottom" round visible={RegionShow} onClose={() => {setRegionShow(false)}}>
                            <React.Vant.Area 
                                title="选择地区"
                                value={code}
                                areaList={areaList} 
                                onConfirm={RegionConfirm}
                                onCancel={() => setRegionShow(false)}
                            />
                        </React.Vant.Popup>

                        {/* 上传头像 */}
                        <React.Vant.Form.Item
                            label="头像"
                            labelWidth='3.5em'
                            labelAlign='right'
                            name='avatar'
                            initialValue={
                                [
                                    {
                                        url:business.avatar_cdn
                                    }
                                ]
                            }
                        >
                            <React.Vant.Uploader maxCount={1} value={avatar} />
                        </React.Vant.Form.Item>
                    </React.Vant.Form>
                </div>
            </div>
        </>
    )
}

export default Profile;